<!DOCTYPE html>
<html style="font-size: 25.75px;">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no">
		<title>收到一封来自思空的情书</title>
		<link rel="stylesheet" href="css/jd.css" />
		<link rel="stylesheet" href="css/jd2.css" />
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/css3.css" />
	</head>

	<body>
		<!--<section class="page1">
			<img src="img/page1/love.png" class="page1-love" />
			<img src="img/page1/title.png" class="page1-title bounceInRight" id="box" />
			<img src="img/page1/btn.png" class="page1-btn" />
		</section>
		<section class="page2">
			<div class="div-up">
				<img src="img/up.png" class="up" />
			</div>

		</section>-->
		<section class="page3">
			
			<img src="img/page3/job-HuaShou.png" class="job job-HuaShou" />
			<img src="img/page3/job-HR.png" class="job job-HR" />
			<img src="img/page3/job-video.png" class="job job-video" />
			<img src="img/page3/job-yewu.png" class="job job-Yewu" />
			<img src="img/page3/job-wx.png" class="job job-wx" />
			<img src="img/page3/job-kehu.png" class="job job-KeHu" />
			<img src="img/page3/job-tv.png" class="job job-tv" />
			<img src="img/page3/job-DuiZhang.png" class="job job-DuiZhang" />
			<img src="img/page3/job-ShiChang.png" class="job job-ShiChang" />
			<img src="img/page3/job-meijie.png" class="job job-meijie" />
			<img src="img/page3/job-webo.png" class="job job-webo" />
			<img src="img/page3/job-video2.png" class="job job-video2" />
			<img src="img/page3/job-WenAn.png" class="job job-WenAn" />
			<div class="div-up">
				<img src="img/up.png" class="up" />
			</div>
		</section>
		<section class="page4">
			<div class="page4-dec">
				<ul class="detail_main">
					<li class="detail_item">
						<div class="detail_txt"></div>
					</li>
					<li class="detail_item">
						<div class="detail_txt"></div>
					</li>
					<li class="detail_item">
						<div class="detail_txt"></div>
					</li>
				</ul>
			</div>

			<!--<li class="item">
						<div class="huaShou">
							<div class="panel-canel">
								<img src="img/page3/job-dec/job-HuaShou-canel.png" class="job-HuaShou-canel canel ig"/>
							</div>
						</div>
					</li>-->

			<!--<div class="panel-love">
				<ul>
					<li>
						<img src="img/page4/love-huashou-hl.png" class="li-img" />
					</li>
					<li>
						<img src="img/page4/love-hr.png" class="li-img" />
					</li>
					<li>
						<img src="img/page4/love-video.png" class="li-img" />
					</li>
					<li>
						<img src="img/page4/love-yewu.png" class="li-img" />
					</li>
					<li>
						<img src="img/page4/love-wx.png" class="li-img" />
					</li>
					<li>
						<img src="img/page4/love-kehu.png" class="li-img" />
					</li>
					<li>
						<img src="img/page4/love-tv.png" class="li-img" />
					</li>
					<li>
						<img src="img/page4/love-duizhang.png" class="li-img" />
					</li>
					<li>
						<img src="img/page4/love-shichang.png" class="li-img" />
					</li>
					<li>
						<img src="img/page4/love-meijie.png" class="li-img" />
					</li>
					<li>
						<img src="img/page4/love-weibo.png" class="li-img" />
					</li>
					<li>
						<img src="img/page4/love-video2.png" class="li-img" />
					</li>
					<li>
						<img src="img/page4/love-wenan.png" class="li-img" />
					</li>
					
				</ul>
			</div>-->
			<!--<div class="div-up">
				<img src="img/up.png" class="up" />
			</div>-->
		</section>
	</body>
	<script type="text/javascript" src="js/jquery-1.10.0.js"></script>
	<script>
		$(function() {
			$('.page1-love').addClass('animated bounceInDown');
			$('.page1-title').addClass('animated bounceInRight');
			$('.page1-btn').addClass('animated bounceInLeft');
			$.fn.extend({
				animateCss: function(animationName, callback) {
					var animationEnd = (function(el) {
						var animations = {
							animation: 'animationend',
							OAnimation: 'oAnimationEnd',
							MozAnimation: 'mozAnimationEnd',
							WebkitAnimation: 'webkitAnimationEnd',
						};

						for(var t in animations) {
							if(el.style[t] !== undefined) {
								return animations[t];
							}
						}
					})(document.createElement('div'));

					this.addClass('animated ' + animationName).one(animationEnd, function() {
						$(this).removeClass('animated ' + animationName);

						if(typeof callback === 'function') callback();
					});

					return this;
				},
			});
		})
		$('.page1-btn').click(function() {
			$('.page1').addClass('animated rollOut')
			setTimeout(function() {
				$('.page1').css('display', 'none')
				$('.page2').addClass('animated rollIn')
				$('.div-up').addClass('animated pulse infinite')
			}, 1000)
		})
		$('.div-up').click(function() {
			$('.page2').animateCss('slideOutUp', function() {
				// Do somthing after animation
				$('.page2').css('display', 'none');

			});
		})
		$('.job').addClass('animated pulse infinite')
		//		$('.canel').addClass('animated rotateIn slow')
	</script>

</html>